<template>
  <div ref="print"
       class="transport">
    <div v-for="(element, num) in groupData"
         :key="num">
      <h4 style="font-family: 宋体; text-align: center; font-size: 16px; margin-bottom: 15px;">脱普公司</h4>
      <div style="display: flex; justify-content: flex-start; align-items: center;">
        <div style="font-size: 14px; margin: 3px 0; width: 50%;">
          <label style="font-weight: bold;">发货单位:</label>
          <span style="margin-left: 20px; font-size: 12px;">{{ form.pickName }}</span>
        </div>
        <div style="font-size: 14px; margin: 3px 0; width: 50%;">
          <label style="font-weight: bold;">单据种类:</label>
          <span style="margin-left: 20px; font-size: 12px;">{{ form.orderCategory }}</span>
        </div>
      </div>
      <div style="display: flex; justify-content: flex-start; align-items: center;">
        <div style="font-size: 14px; margin: 3px 0; width: 50%;">
          <label style="font-weight: bold;">原始单据:</label>
          <span style="margin-left: 20px; font-size: 12px;">{{ form.No }}</span>
        </div>
        <div style="font-size: 14px; margin: 3px 0; width: 50%;">
          <label style="font-weight: bold;">单据有效期:</label>
          <!-- to do -->
          <span style="margin-left: 20px; font-size: 12px;"></span>
        </div>
      </div>
      <div style="display: flex; justify-content: flex-start; align-items: center;">
        <div style="font-size: 14px; margin: 3px 0; width: 50%;">
          <label style="font-weight: bold;">本单编号:</label>
          <span style="margin-left: 20px; font-size: 12px;">{{ form.contractNoWly }}</span>
        </div>
        <div style="font-size: 14px; margin: 3px 0; width: 50%;">
          <label style="font-weight: bold;">填单日期:</label>
          <span style="margin-left: 20px; font-size: 12px;">{{ form.dateTop }}</span>
        </div>
      </div>
      <div style="display: flex; justify-content: flex-start; align-items: center;">
        <div style="font-size: 14px; margin: 3px 0; width: 50%;">
          <label style="font-weight: bold;">客户代号:</label>
          <span style="margin-left: 20px; font-size: 12px;">{{ form.customerNameTop }}</span>
        </div>
        <div style="font-size: 14px; margin: 3px 0; width: 50%;">
          <label style="font-weight: bold;">客户名称:</label>
          <span style="margin-left: 20px; font-size: 12px;">{{ form.consigneeName }}</span>
        </div>
      </div>
      <div style="display: flex; justify-content: flex-start; align-items: center;">
        <div style="font-size: 14px; margin: 3px 0; width: 50%;">
          <label style="font-weight: bold;"> 联系人:</label>
          <span style="margin-left: 20px; font-size: 12px;">{{ form.toAddress.contactName }}</span>
        </div>
        <div style="font-size: 14px; margin: 3px 0; width: 50%;">
          <label style="font-weight: bold;">联系电话:</label>
          <span style="margin-left: 20px; font-size: 12px;">{{ form.toAddress.contactMobile }}</span>
        </div>
      </div>
      <div style="display: flex; justify-content: flex-start; align-items: center;">
        <div style="margin-bottom: 8px; margin: 3px 0; font-size: 14px;">
          <label style="font-weight: bold;">收货地址:</label>
          <span style="font-size: 12px;">
            {{ form.toAddress.province }}{{ form.toAddress.city }}{{ form.toAddress.district }}{{ form.toAddress.address }}
          </span>
        </div>
      </div>
      <div style="height: 1px; border-top: 1px solid var(--prev-border-color-grey); margin: 6px 0;"></div>
      <div style="min-height: 678px; max-height: 705px;">
        <table style="width: 100%; font-size: 11px; table-layout: fixed; border-collapse: collapse; border: none;"
               border="0"
               cellspacing="0"
               cellpadding="0">
          <thead style="line-height: 20px; word-wrap: break-word; word-break: break-word;">
            <tr>
              <th style="width:4%;">序号</th>
              <th style="width:35%;">简称/中文名称</th>
              <th style="width:5%;">箱入数</th>
              <th style="width:5%;">数量</th>
              <th style="width:16%;">单位/条形码</th>
              <th>未税单价</th>
              <th>未税金额</th>
              <th>税额</th>
              <th>含税金额</th>
            </tr>
          </thead>
          <tbody>
            <template v-for="(item, index) in element.slice(0, element.length)">
              <tr v-if="item.name"
                  :key="index">
                <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; padding: 6px 3px; text-align: center; word-break: break-word; line-height: 18px;">
                  {{ num * 10 + (index + 1) }}
                </td>
                <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; padding: 6px 3px; text-align: center; word-break: break-word; line-height: 18px;">
                  {{ item.name }}<br />{{ item.chineseName }}
                </td>
                <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; padding: 6px 3px; text-align: center; word-break: break-word; line-height: 18px;">
                  {{ item.spc }}
                </td>
                <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; padding: 6px 3px; text-align: center; word-break: break-word; line-height: 18px;">
                  {{ item.qty }}
                </td>
                <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; padding: 6px 3px; text-align: center; word-break: break-word; line-height: 18px;">
                  {{ item.extendDoc1 }}<br />
                  {{ item.barcode }}
                </td>
                <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; padding: 6px 3px; text-align: center; word-break: break-word; line-height: 18px;">
                  {{ item._noTaxPrice }}
                </td>
                <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; padding: 6px 3px; text-align: center; word-break: break-word; line-height: 18px;">
                  {{ item._noTaxAmount }}
                </td>
                <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; padding: 6px 3px; text-align: center; word-break: break-word; line-height: 18px;">
                  {{ item._itemTax }}
                </td>
                <td style="word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; padding: 6px 3px; text-align: center; word-break: break-word; line-height: 18px;">
                  {{ item._taxAmount }}
                </td>
              </tr>
            </template>
            <tr>
              <td colspan="2"
                  style="text-align:left; padding-top:3px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
                <span>送货金额（</span>本页小计<span>）</span>
              </td>
              <td colspan="2"
                  style="text-align:right;padding-top:3px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
                {{ element[element.length - 1].qty }}件
              </td>
              <td colspan="2"
                  style="padding-top:3px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
              </td>
              <td style="padding-top:3px; text-align:center; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
                {{ element[element.length - 1].noTaxAmount }}
              </td>
              <td style="padding-top:3px; text-align:center; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
                {{ element[element.length - 1].itemTax }}
              </td>
              <td style="padding-top:3px; text-align:center; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
                {{ element[element.length - 1].taxAmount }}
              </td>
            </tr>
            <tr v-if="num === groupData.length - 1">
              <td colspan="2"
                  style="text-align:left; padding-top:3px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
                送货金额（总计）
              </td>
              <td colspan="2"
                  style="padding-top:3px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
              </td>
              <td colspan="2"
                  style="padding-top:3px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
              </td>
              <td style="padding-top:3px; text-align:center; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
                {{ returnThousandDigit(form.total.totalNoTaxAmount, 2) }}
              </td>
              <td style="padding-top:3px; text-align:center; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
                {{ returnThousandDigit(form.total.totalItemTax, 2) }}
              </td>
              <td style="padding-top:3px; text-align:center; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
                {{ returnThousandDigit(form.total.totalTaxAmount, 2) }}
              </td>
            </tr>
            <tr v-if="num === groupData.length - 1">
              <td colspan="4"
                  style="text-align:left; padding-top:3px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
                折扣
              </td>
              <td style="padding-top:3px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;"></td>
              <td style="padding-top:3px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;"></td>
              <td style="padding-top:3px; text-align:center; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
                {{ returnThousandDigit(form.discountTotal.totalNoTaxAmount, 2) }}
              </td>
              <td style="padding-top:3px; text-align:center; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
                {{ returnThousandDigit(form.discountTotal.totalItemTax, 2) }}
              </td>
              <td style="padding-top:3px; text-align:center; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
                {{ returnThousandDigit(form.discountTotal.totalTaxAmount, 2) }}
              </td>
            </tr>
            <tr v-if="num === groupData.length - 1">
              <td colspan="4"
                  style="text-align:left;padding-top:3px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
                发票金额
              </td>
              <td style="padding-top:3px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;"></td>
              <td style="padding-top:3px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;"></td>
              <td style="padding-top:3px; text-align:center; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
                {{ returnThousandDigit(form.amountTotal.totalNoTaxAmount, 2) }}
              </td>
              <td style="padding-top:3px; text-align:center; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
                {{ returnThousandDigit(form.amountTotal.totalItemTax, 2) }}
              </td>
              <td style="padding-top:3px; text-align:center; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
                {{ returnThousandDigit(form.amountTotal.totalTaxAmount, 2) }}
              </td>
            </tr>
            <tr v-if="num === groupData.length - 1">
              <td colspan="2"
                  style="text-align:left; padding-top:3px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
                总货总件数
              </td>
              <td colspan="2"
                  style="text-align:right; padding-top:3px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
                {{ form.totalQuantity }}件
              </td>
              <td colspan="2"
                  style="text-align:center; padding-top:3px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
                总体积：{{ form.calculateVolume }}立方米
              </td>
              <td colspan="3"
                  style="text-align:center; padding-top:3px; word-wrap: break-word; overflow: hidden; text-overflow: ellipsis; word-break: break-word; line-height: 16px;">
                总重量：{{ form.calculateWeight }}公斤
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <div style="height: 1px; border-top: 1px solid var(--prev-border-color-grey); margin: 6px 0;"></div>
      <div style="margin-top:4px;">
        <div style="min-height: 25px; line-height: 18px; font-size: 12px; padding: 5px 0;">
          备注: {{form.remarks}}(客户签收时，请注意各项收货数量，如不附注，视为默认收货数量等于送货数量)
        </div>
        <div style="min-height: 15px;margin-top: 6px;overflow: hidden;">
          <span style="float: left;width: 40%; font-size: 12px;">运输公司名称: {{ form.supplierName || 'ZBWLS(上海中保)' }}</span>
          <span style="float: left;width: 20%; font-size: 12px;">运输公司车号:</span>
          <span style="float: left;width: 20%; font-size: 12px;">车型:</span>
          <span style="float: left; font-size: 12px;">承运人:</span>
        </div>
      </div>
      <div style="height: 1px; border-top: 1px solid var(--prev-border-color-grey); margin: 6px 0;"></div>
      <div style="margin: 5px 0;">
        <div style="height: 40px;overflow:hidden;">
          <span style="float: left;width: 18%;margin-right: 12px; font-size: 12px;">发货核准</span>
          <span style="float: left;width: 18%;margin-right: 12px; font-size: 12px;">复核</span>
          <span style="float: left;width: 18%;margin-right: 12px; font-size: 12px;">发货经办</span>
          <span style="float: left;width: 18%;margin-right: 12px; font-size: 12px;">制单</span>
          <span style="float: left;width: 18%; font-size: 12px;">客户签收/盖章</span>
        </div>
        <div style="height: 30px;overflow:hidden;">
          <span style="float: left;width: 18%;height: 18px;border-bottom: 1px solid #666;margin-right: 12px; font-size: 12px;"></span>
          <span style="float: left;width: 18%;height: 18px;border-bottom: 1px solid #666;margin-right: 12px; font-size: 12px;"></span>
          <span style="float: left;width: 18%;height: 18px;border-bottom: 1px solid #666;margin-right: 12px; font-size: 12px;"></span>
          <span style="float: left;width: 18%;height: 18px;border-bottom: 1px solid #666;margin-right: 12px; font-size: 12px;"></span>
          <span style="float: left;width: 18%;height: 18px;border-bottom: 1px solid #666; font-size: 12px;"></span>
        </div>
      </div>
      <div style="line-height: 18px; font-size: 12px; padding: 5px 10px;">
        共五联 第一联：签收联（白）第二联：客户联（红）第三联：财务联（黄）第四联：统计联（绿）第五联：仓库联（蓝）
      </div>
    </div>
  </div>
</template>
<script>
import { order, top } from '@/api/index'
export default {
  name: "TopThroughPrint",
  data () {
    return {
      form: {},
      groupData: [],
      goodsList: []
    };
  },
  created () {
    this.orderId = Number(this.$route.query.orderId);
    this.getDetail();
  },
  methods: {
    async loadTopOrder () {
      let { data } = await top.loadTopOrder({ orderId: this.orderId });
      // let arr = this.goodsList.filter(v => data?.goodsList.some(o => o.goodsId === v.goodsId && o.batchNo === v.batchNo));
      let arr = [];
      if (data) {
        this.form = {
          ...this.form,
          ...data,
          customerNameTop: data?.customerCode,
          No: data?.originNumber ? `${this.form.contractNoWly}(${data.originNumber})` : this.form.contractNoWly,
          dateTop: data?.date ? this.$moment(data.date).format("YYYY-MM-DD") : null
        };
        this.goodsList.map(item => {
          data?.goodsList.map(ele => {
            if (item.goodsId === ele.goodsId && item.batchNo === ele.batchNo) {
              return arr.push({
                ...item,
                chineseName: ele.chineseName,
                extendDoc1: ele.purchaseUnit,
                noTaxPrice: ele.noTaxPrice,
                _noTaxPrice: this.returnThousandDigit(ele.noTaxPrice, 4),
                noTaxAmount: ele.noTaxAmount,
                _noTaxAmount: this.returnThousandDigit(ele.noTaxAmount, 2),
                itemTax: ele.itemTax,
                _itemTax: this.returnThousandDigit(ele.itemTax, 2),
                taxAmount: ele.taxAmount,
                _taxAmount: this.returnThousandDigit(ele.taxAmount, 2),
              })
            }
          })
        })
      } else {
        arr = this.goodsList;
      }
      this.groupData = JSON.parse(
        JSON.stringify(this.group(arr, 10))
      );
      this.print();
    },
    async getDetail () {
      let { data } = await order.orderDetailsApi(this.orderId)
      this.form = {
        ...data,
        No: data?.contractNo,
        contractNoWly: data?.contractNo,
        supplierName: data?.echo?.carrierName,
        total: {
          totalNoTaxAmount: 0,
          totalItemTax: 0,
          totalTaxAmount: 0
        },
        discountTotal: {
          totalNoTaxAmount: 0,
          totalItemTax: 0,
          totalTaxAmount: 0
        },
        amountTotal: {
          totalNoTaxAmount: 0,
          totalItemTax: 0,
          totalTaxAmount: 0
        },

      };
      this.goodsList = data.goodsList.map(item => {
        return {
          ...item,
          name: item.goodsName,
          spc: item.spec,
          qty: item.quantity,
          barcode: item.barcode,
          _noTaxPrice: this.returnThousandDigit(0, 4),
          _noTaxAmount: this.returnThousandDigit(0, 2),
          _itemTax: this.returnThousandDigit(0, 2),
          _taxAmount: this.returnThousandDigit(0, 2),
        }
      });
      this.loadTopOrder();
    },
    /**
     * 千分位处理
     */
    returnThousandDigit (value, precision = 0, splitDesc = ",") {
      const str = value.toFixed(precision);
      const reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;
      return str.replace(reg, "$1" + splitDesc);
    },
    group (array, subGroupLength) {
      let index = 0;
      let newArray = [];
      while (index < array.length) {
        newArray.push(array.slice(index, (index += subGroupLength)));
      }
      newArray.forEach(item => {
        // 分页合计
        let data = {
          qty: 0,
          noTaxPrice: 0,
          noTaxAmount: 0,
          itemTax: 0,
          taxAmount: 0
        };
        item.forEach(element => {
          element.noTaxAmount = element.noTaxAmount || 0;
          element.itemTax = element.itemTax || 0;
          element.taxAmount = element.taxAmount || 0;
          data.qty += element.qty;
          data.noTaxAmount += element.noTaxAmount;
          data.itemTax += element.itemTax;
          data.taxAmount += element.taxAmount;
        });
        item.push({
          ...data,
          noTaxAmount: this.returnThousandDigit(data.noTaxAmount, 2),
          itemTax: this.returnThousandDigit(data.itemTax, 2),
          taxAmount: this.returnThousandDigit(data.taxAmount, 2)
        });
      });
      return newArray;
    },
    print () {
      setTimeout(() => {
        this.$print(this.$refs.print)
        // if (window.document.execCommand("print")) window.close();
        // window.print()
      }, 1000);
    },
  }
};
</script>
<style lang="scss" scoped>
@media print {
  @page {
    size: auto A4 landscape;
  }
  .transport {
    page-break-after: always;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    height: auto;
  }
}
@media screen {
  .transport {
    display: none;
  }
}
</style>